<template>
  <div>
    <div class="container">
      <p>子组件</p>
      <p>{{ money }}</p>
      <hr/>
      <!--      子传父-->
      <button @click="changeMoney">花50元</button>
      <hr/>
      <button @click="updateMoney1">父子通讯---{{money1}}</button>
    </div>
  </div>
</template>

<script>
import {inject} from 'vue'

export default {
  name: "Son",
  // 子组件接收父组件数据使用props即可
  props: {
    money: {
      type: Number,
      default: 0
    }
  },
  setup(props, {emit}) {
    // 获取父组件数据money
    console.log(props.money)
    // 向父组件传值
    const changeMoney = () => {
      emit('change-money', 50)
    }
    const money1 = inject('money1')
    const updateMoney1 = inject('updateMoney1')
    return {
      changeMoney,
      money1,
      updateMoney1
    }
  }
}
</script>

<style scoped>

</style>
